import React, {useEffect, useRef, useState} from 'react';
import { forwardRef } from 'react';
import './index.scss';
import * as echarts from "echarts";

export interface HorizontalBarData {
  id: string;
  label: string;
  data: {
    actual: number;    // 实时进站人数 (青色)
    inbound: number;   // 实时进站人数 (蓝色)
    outbound: number;  // 累计人数 (黄色)
  };
  maxValue?: number;
}

export interface HorizontalBarChartProps {
  width?: string | number;
  height?: string | number;
  data?: HorizontalBarData[];
  maxValue?: number;
  showLegend?: boolean;
  legendLabels?: {
    actual?: string;
    inbound?: string;
    outbound?: string;
  };
  colors?: {
    actual?: string;
    inbound?: string;
    outbound?: string;
  };
  labelWidth?: number;
  barHeight?: number;
  spacing?: number;
  showValues?: boolean;
  showGrid?: boolean;
  gridColor?: string;
  backgroundColor?: string;
  labelColor?: string;
  labelFontSize?: number;
  labelFontFamily?: string;
  valueFontSize?: number;
  valueFontFamily?: string;
  onCornerClick?: (position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight') => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onBarClick?: (data: HorizontalBarData, index: number) => void;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const HorizontalBarChart = forwardRef<HTMLDivElement, HorizontalBarChartProps>((props, ref) => {
  const {
    width = 500,
    height = 1080,
    data = [
      { id: 'subway', label: '地铁', data: { actual: 350, inbound: 280, outbound: 200 } },
      { id: 'bus', label: '公交', data: { actual: 180, inbound: 150, outbound: 120 } },
      { id: 'taxi', label: '出租车', data: { actual: 300, inbound: 250, outbound: 180 } },
      { id: 'longdist', label: '长运', data: { actual: 220, inbound: 180, outbound: 140 } },
      { id: 'ridehail', label: '网约车', data: { actual: 280, inbound: 230, outbound: 160 } }
    ],

    maxValue = 400,
    showLegend = true,
    legendLabels = {
      actual: '实时出站人数',
      inbound: '实时进站人数',
      outbound: '累计人数'
    },
    colors = {
      actual: '#00FFF1',
      inbound: '#40AEF9',
      outbound: '#FFE292'
    },
    labelWidth = 80,
    barHeight = 24,
    spacing = 39,
    showValues = true,
    showGrid = true,
    gridColor = 'rgba(255, 255, 255, 0.1)',
    backgroundColor = 'transparent',
    labelColor = 'rgba(255, 255, 255, 0.9)',
    labelFontSize = 14,
    labelFontFamily = 'SourceHanSansSC',
    valueFontSize = 12,
    valueFontFamily = 'DINAlternate',
    theme = 'dark',
    topLeftImage = 'http://localhost:8085/static/images/chuxingfuwu/bg1.png',
    topRightImage = 'http://localhost:8085/static/images/chuxingfuwu/bg2.png',
    bottomLeftImage = 'http://localhost:8085/static/images/chuxingfuwu/bg11.png',
    bottomRightImage = 'http://localhost:8085/static/images/chuxingfuwu/bg12.png',
    centerImage = 'http://localhost:8085/static/images/chuxingfuwu/zx.png',
    cornerSize = {
      width: 173,
      height: 57
    },
    centerSize = {
      width: 151,
      height: 130
    },
    labels = {
      topLeft: '停车区域A',
      topRight: '停车区域B',
      bottomLeft: '停车区域C',
      bottomRight: '停车区域D',
      center: '管理中心'
    },
    halfData = [
      { icon: "http://localhost:8085/static/images/chuxingfuwu/编组52.png", label: "铁路", value: 1185 },
      { icon: "http://localhost:8085/static/images/chuxingfuwu/编组25.png", label: "地铁", value: 118755 },
      { icon: "http://localhost:8085/static/images/chuxingfuwu/编组20.png", label: "公交", value: 1185 },
      { icon: "http://localhost:8085/static/images/chuxingfuwu/编组26.png", label: "出租车", value: 1185 }
    ],
    style = {},
    number = {},
    className = '',
    onBarClick,
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;
  const componentStyle: React.CSSProperties = {
    width: width,
    height: height,
    ...style
  };
  const parkStyle: React.CSSProperties = {
    width: `${((cornerSize.width * 2) + centerSize.width) - 65}px`,
    height: `${(cornerSize.height * 2) + 5}px`,
    ...style
  };
  const leftRightImg: React.CSSProperties = {
    width: typeof cornerSize.width === 'number' ? `${cornerSize.width}px` : cornerSize.width,
    height: typeof cornerSize.height === 'number' ? `${cornerSize.height}px` : cornerSize.height,
    ...style
  };
  const barChartRef = useRef<HTMLDivElement>(null);
  const lineChartRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (barChartRef.current && lineChartRef.current) {
      const chartInstanceBar = echarts.init(barChartRef.current);
      const chartInstanceLine = echarts.init(lineChartRef.current);
      const barOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          icon: 'roundRect',
          itemHeight: 2,
          itemWidth: 16,
          top: '0', // 顶部位置
          right: '2%', // 右侧位置
          textStyle: {
            fontSize: 12,
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        grid: {
          left: '3%',
          right: '2%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: [
          {
            nameGap: 20,
            show: false,
            type: 'value',
          }
        ],
        yAxis: [
          {
            nameGap: 20,
            type: 'category',
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: false,
              distance: 20
            },
            axisLabel: {
              fontSize: 14,
              color: 'rgba(255, 255, 255, 0.80)',
              interval: 0,
              margin: 15,
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        series: [
          {
            name: 'Profit',
            type: 'bar',
            barWidth: 3,
            showBackground: true,
            barGap: '200%',
            backgroundStyle: {
              color: '#234155',
              borderWidth: '10',
              borderColor: '#234155', // 不能使用rgba
              borderRadius: [1, 1, 0, 0]
            },
            label: {
              show: false,
            },
            data: [200, 170, 240, 244, 200, 220, 210]
          },
          {
            name: 'Income',
            type: 'bar',
            stack: 'Total',
            barWidth: 3,
            showBackground: true,
            barGap: '200%',
            backgroundStyle: {
              borderWidth: '10',
              borderColor: '#234155',
              borderRadius: [0, 0, 1, 1]
            },
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 341, 374, 390, 450, 420]
          },
          {
            name: 'Expenses',
            type: 'bar',
            stack: 'Total',
            barWidth: 3,
            showBackground: true,
            barGap: '200%',
            backgroundStyle: {
              borderWidth: '10',
              borderColor: '#234155',
              borderRadius: [0, 0, 1, 1]
            },
            label: {
              show: false,
            },
            data: [120, -132, -101, -134, -190, -230, -210]
          }
        ]
      };
      const lineOption = {
        color: ['#0091FF', '#00FFF1', '#FFA510', '#E985FF'],
        legend: {
          icon: 'roundRect',
          itemHeight: 2,
          itemWidth: 16,
          top: '0', // 顶部位置
          right: '2%', // 右侧位置
          textStyle: {
            fontSize: 12,
            color: 'rgba(255, 255, 255, 0.8)'
          },
          data: ['铁路', '地铁', '公交', '出租车']
        },
        grid: {
          left: '10%',
          right: '3%',
          top: '20%',
          bottom: '20%',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          },
          axisLabel: {
            fontSize: 14,
            color: 'rgba(255, 255, 255, 0.80)',
            interval: 1,
            margin: 10
          },
          data: ['6.4', '6.5', '6.6', '6.7', '6.8', '6.9'],

        },
        yAxis: {
          type: 'value',
          splitNumber: 4,
          axisLabel: {
            fontSize: 12,
            color: 'rgba(255, 255, 255, 0.80)',
            interval: 1
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.1)',
            },
          }
        },
        series: [
          // name顺序必须要和legend.data顺序对应起来
          {
            name: '铁路',
            type: 'line',
            data: [],
            symbol: 'none',
            smooth: true
          },
          {
            name: '地铁',
            type: 'line',
            data: [],
            symbol: 'none',
            smooth: true
          },
          {
            name: '公交',
            type: 'line',
            data: [200,134,234,156,212,231],
            symbol: 'none',
            smooth: true
          },
          {
            name: '出租车',
            type: 'line',
            data: [],
            symbol: 'none',
            smooth: true
          }
        ],
      };
      chartInstanceBar.setOption(barOption);
      chartInstanceLine.setOption(lineOption);
      window.addEventListener('resize', () => chartInstanceBar.resize());
      window.addEventListener('resize', () => chartInstanceLine.resize());
      return () => {
        chartInstanceBar.dispose();
        chartInstanceLine.dispose();
      };
    }
  }, []);
  return (
    <div
      ref={ref}
      className="horizontal-bar-chart"
      style={componentStyle}
      {...otherProps}>
      <div className="top-area">
        <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
          <div className="title-str">
            <div className="title">
              <div>客流预测</div>
              <div className="sen-title">客流预测</div>
            </div>
            <div className="subtitle">Traffic prediction</div>
          </div>
        </div>
        <div className="content-wrap">
          <div className="item-head">
            <div className="head-round" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/point-icon-blue.png)'}} />
            <div className="head-title">半小时预测客流</div>
            <div className="head-line" />
            <div className="head-right" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/left-icon-blue.png)'}} />
          </div>
          <div className="half-area">
            {halfData.map((half, index) => (
              <div className="half-item">
                <div className="half-item-icon" style={{backgroundImage: `url(${half.icon})`}} />
                <div>{half.label}</div>
                <div className="value-bg">
                  <div className="value">{half.value}</div>
                  <div>人</div>
                </div>
              </div>
            ))}
          </div>
          <div className="data-area">
            <div className="in-str">进</div>
            <div className="left-item">
              <div className="value-bg">
                <div className="value">56</div>
                <div>班</div>
              </div>
              <div className="str-bg">
                <div className="value">1</div>
                <div>人</div>
              </div>
            </div>
            <div className="middle-item">半小时</div>
            <div className="right-item">
              <div className="value-bg">
                <div className="value">56</div>
                <div>班</div>
              </div>
              <div className="str-bg">
                <div className="value">1</div>
                <div>人</div>
              </div>
            </div>
            <div className="out-str">出</div>
          </div>
          <div className="item-head">
            <div className="head-round" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/point-icon-blue.png)'}} />
            <div className="head-title">48小时预测客流（昨日.今日）</div>
            <div className="head-line" />
            <div className="head-right" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/left-icon-blue.png)'}} />
            <div className="plus-icon" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/plus-icon.png)'}} />
          </div>
          <div style={{width: '100%', height: '177px'}}>
            <div className="chart-container" ref={lineChartRef} style={{ width: '100%', height: '182px' }}>
            </div>
          </div>
        </div>
        <div className="bottom-line" />
      </div>
      <div className="bottom-area">
        <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
          <div className="title-str">
            <div className="title">
              <div>运营现状</div>
              <div className="sen-title">运营现状</div>
            </div>
            <div className="subtitle">Traffic prediction</div>
          </div>
        </div>
        <div className="content-wrap">
          <div style={{width: '100%', height: '250px'}}>
            <div className="chart-container" ref={barChartRef} style={{ width: '100%', height: '100%' }}>
            </div>
          </div>
          <div className="item-head">
            <div className="head-round" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/point-icon-blue.png)'}} />
            <div className="head-title">停车场管理</div>
            <div className="head-line" />
            <div className="head-right" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/left-icon-blue.png)'}} />
            <div className="plus-icon" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/plus-icon.png)'}} />
          </div>
          <div className="park-area" style={parkStyle}>
            <div className="left">
              <div className="left-item"
                   style={{ leftRightImg, backgroundImage: topLeftImage ? `url(${topLeftImage})` : undefined,
                     width: cornerSize.width,
                     height: cornerSize.height,
                     backgroundPosition: 'top center'}}>
                <div className="item-str">
                  <span>{labels.topLeft}</span>
                  <span style={{fontSize: '20px'}}>{number.topLeft}</span>
                </div>
              </div>
              <div className="left-item"
                   style={{ leftRightImg, backgroundImage: bottomLeftImage ? `url(${bottomLeftImage})` : undefined,
                     width: cornerSize.width,
                     height: cornerSize.height,
                     backgroundPosition: 'bottom center'}}>
                <div className="item-str">
                  <span>{labels.bottomLeft}</span>
                  <span style={{fontSize: '20px'}}>{number.bottomLeft}</span>
                </div>
              </div>
            </div>
            <div className="middle"
                 style={{
                   backgroundImage: centerImage ? `url(${centerImage})` : undefined,
                   left: cornerSize.width - 20,
                   width: centerSize.width,
                   height: centerSize.height,}}></div>
            <div className="right">
              <div className="left-item"
                   style={{leftRightImg, backgroundImage: topRightImage ? `url(${topRightImage})` : undefined,
                     width: cornerSize.width,
                     height: cornerSize.height,
                     backgroundPosition: 'top center'}}>
                <div className="item-str">
                  <span>{labels.topRight}</span>
                  <span style={{fontSize: '20px'}}>{number.topRight}</span>
                </div>
              </div>
              <div className="left-item"
                   style={{leftRightImg, backgroundImage: bottomRightImage ? `url(${bottomRightImage})` : undefined,
                     width: cornerSize.width,
                     height: cornerSize.height,
                     backgroundPosition: 'bottom center'}}>
                <div className="item-str">
                  <span>{labels.bottomRight}</span>
                  <span style={{fontSize: '24px'}}>{number.bottomRight}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="bottom-line" />
      </div>

    </div>

  );
});

HorizontalBarChart.displayName = 'HorizontalBarChart';

export default HorizontalBarChart;
